<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ajax测试</title>
<style type="text/css">
.part { //
	border-bottom: dashed 2px grey;
	padding: 10px;
}

.content {
	border: dashed 1px black; //
	background-color: blue;
	padding: 15px;
	width: inhert;
	text-align: center;
}

div {
	margin: 10px 0;
}

input {
	width: 50px;
}

button {
	min-width: 150px;
	min-height: 30px;
}
</style>

<script src="js/jquery.min.js"></script>
</head>
<body>
	<button id="btnLoad">load</button>
	<button id="btnFun">getScript&getJSON</button>
	<button id="btnG_p">get&post</button>
	<button id="btnAjax">ajax</button>
	

	<div class='part' id='pa1'>
		<h3>load():</h3>
		<p id="loadContent" class='content'>效果显示于此</p>
		<button id="loadAll">获取整个目标html</button>
		<button id="loadCon">获取目标html部分内容</button>
		<div>
			<input id="loadAddData">
			<button id="loadAddString">追加字符串数据</button>
			<button id="loadAddObject">追加对象数据</button>
		</div>
	</div>

	<div class='part' id='pa2'>
		<h3>jQuery.getScript()、jQuery.getJSON():</h3>
		<p id="funContent" class='content'>效果显示于此</p>
		<button id="getScript">执行目标脚本文件</button>
		<button id="getJSON">获取目标json文件</button>
		<div>
			<input id="funAddData">
			<button id="getJSONAddString">追加字符串数据(getJSON)</button>
			<button id="getJSONAddObject">追加对象数据(getJSON)</button>
		</div>
	</div>

	<div class='part' id='pa3'>
		<h3>jQuery.get()、jQuery.post():</h3>
		<p id="g_pContent" class='content'>效果显示于此</p>
		<!-- <button id="get">执行目标脚本文件</button>
		<button id="post">获取目标json文件</button> -->
		<div>
			<button id="get">GET 'json'类型</button>
			
		</div>
	</div>

	<div class='part' id='pa4'>
		<h3>jQuery.ajax():</h3>
		<p id="ajaxContent" class='content'>效果显示于此</p> 
		<div>
			<button id="ajax">ajax</button>
			<button id="getjsonp">jsonp</button>
 		</div>
	</div>

	<script>
		function bindEvent(id, fun) {
			$("#" + id).click(fun);
		}

		function update() {
			$('#pa1').hide();
			$('#pa2').hide();
			$('#pa3').hide();
			$('#pa4').hide();

			switch (this.id) {
			case 'btnLoad':
				$('#pa1').show();
				break;
			case 'btnFun':
				$('#pa2').show();
				break;
			case 'btnG_p':
				$('#pa3').show();
				break;
			case 'btnAjax':
				$('#pa4').show();
				break;
			}
		}
		bindEvent('btnLoad', update);
		bindEvent('btnFun', update);
		bindEvent('btnG_p', update);
		bindEvent('btnAjax', update);

		bindEvent('loadAll', function() {
			$("#loadContent").load("ajax/ajaxA.html");
		});
		$('#btnLoad').click();

		bindEvent('loadCon', function() {
			$("#loadContent").load("ajax/ajaxA.html #content1");
		});

		bindEvent('loadAddString', function() {

			$("#loadContent").load("ajax.load.GET.do",
					'name=' + $("#loadAddData").val());
		});
		bindEvent('loadAddObject', function() {
			$("#loadContent").load("ajax.load.POST.do", {
				name : $("#loadAddData").val()
			});
		});

		bindEvent('getScript', function() {
			$.getScript("ajax/ajaxA.js");
		});
		bindEvent('getJSON', function() {
			$.getJSON("ajax/ajaxA.json", function(ob, status) {
				$('#funContent').text(ob.info + '  状态码：' + status);
			});
		});
		bindEvent('getJSONAddString', function() {

			$.getJSON("ajax.getJSON.do", 'name=' + $("#funAddData").val(),
					function(ob, status) {
						$('#funContent').text(ob.name + '  状态码：' + status);
					});
		});
		bindEvent('getJSONAddObject', function() {
			$.getJSON("ajax.getJSON.do", {
				name : $("#funAddData").val()
			}, function(ob, status) {
				$('#funContent').text(ob.name + '  状态码：' + status);
			});
		});

		bindEvent('get', function() {
			$.get("ajax/ajaxA.json", function(data, status) {
				$('#g_pContent').text(data.info + '  状态码：' + status);
			}, 'json');
		});

		bindEvent('getjsonp', function() {
			$.ajax({
				url : "http://localhost:8080/web/ajax.getjsonp.do",
				type : 'GET',
				data:"&jsonp=?",
				dataType : 'jsonp',
				success : function(data, status) {
					var re = data.name;
					$('#ajaxContent').text(re);
				},
				error:function(){
					
				}
			});
 		});
		
		bindEvent('ajax', function() {
			
		$.ajax({
				url : 'ajax/ajaxA.json',
				type : 'GET',
				dataType : 'json',
				success : function(data, status) {
					$('#ajaxContent').text(data.info + '  状态码：' + status);
				},
				error:function(){
					
				}
			});
		});
	</script>

</body>
</html>